<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>几何体-threejs中的几何体</title>
</head>
<body>
    <script src="./three.js"></script>
    <script>
        // 创建场景
        var scene = new THREE.Scene();
        // 创建相机   远景相机  和 正交相机
        var camera = new THREE.OrthographicCamera(- window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 10, 1000);
        camera.position.z = 100;
        // 渲染器 
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        // renderer.setClearColor(0xffffff);
        document.body.appendChild(renderer.domElement);
        // 创建组
        var group = new THREE.Group();
        // 创建几何体
        var geometry = new THREE.CircleBufferGeometry( 50, 32 );
        var material = new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true } );
        var circle = new THREE.Mesh( geometry, material );
        group.add( circle );
        var coneGeometry = new THREE.ConeBufferGeometry( 50, 50, 32, 1, true );
        var cone = new THREE.Mesh( coneGeometry, material );
        cone.position.set(-80, -80, 0);
        // cone.rotation.x = 90;
        group.add( cone );

        var cylinderGeometry = new THREE.CylinderBufferGeometry( 50, 50, 50, 32 );
        var cylinder = new THREE.Mesh( cylinderGeometry, material );
        cylinder.position.set(100, 80, 0);
        group.add( cylinder );
        group.position.set(0, 80, 0);

        var dodecahedronGeometry = new THREE.DodecahedronGeometry(50, );
        var dodecahedron = new THREE.Mesh(dodecahedronGeometry, material);
        dodecahedron.position.set(100, 300, 10);
        group.add(dodecahedron);
      

        // 
        var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
        var edges = new THREE.EdgesGeometry( dodecahedronGeometry );
        var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
        group.add( line );
        line.position.set(-200, 200, 0);
        var length = 120, width = 80;
        // 挤压几何体
        // 设置挤压的形状
        var shape = new THREE.Shape();
        // 
        shape.moveTo( 0,0 );
        shape.lineTo( 0, width );
        shape.lineTo( length, width );
        shape.lineTo( length, 0 );
        shape.lineTo( 0, 0 );

        var extrudeSettings = {
            steps: 1,
            depth: 16,
            bevelEnabled: true,
            bevelThickness: 5,
            bevelSize: 5,
            bevelSegments: 5
        };

        var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
        // var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var mesh = new THREE.Mesh( geometry, material ) ;
        mesh.position.set(-350, 250, 0)
        group.add( mesh );



        scene.add(group)
        function animate() {
            // console.log(cube);
            requestAnimationFrame(animate);
            // cube.rotation.x += 0.01;
            circle.rotation.y += 0.01;
            cone.rotation.x += 0.01;
            cone.rotation.y += 0.01;
            cylinder.rotation.x += 0.01;
            dodecahedron.rotation.y += 0.01;
            dodecahedron.rotation.x += 0.01;
            line.rotation.x += 0.01;
            line.rotation.y += 0.01;
            mesh.rotation.x += 0.01;
            mesh.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate()

    </script>
</body>
</html>